<style scoped lang="less">
  .item {
    display: flex;
    font-size: 16px;
    align-items: center;
    margin-bottom: 5px;
  }

  span.item-title {
    min-width: 100px;
    color: gray;
    text-align: right;
    margin-right: 10px;
  }

  span.item-content {
    background: #fafafa;
    padding: 5px 10px;
    border-radius: 3px;
    flex-grow: 1;
  }

  img.goods-sku-img {
    width: 100px;
    height: 100px;
    padding: 5px;
  }

  .goods-sku-info {
    display: flex;
    font-size: 16px;
  }

  .goods-sku-title-wrap {
    flex-grow: 1;
  }

  .goods-sku-title {
    font-size: 24px;
  }

  span.content-item {
    padding: 5px 10px 5px 0;
    display: inline-block;
  }
  .goods-sku-title{
    cursor: pointer;
    transition: color 500ms ease;
  }
  .goods-sku-title:hover{
    color: blueviolet;
  }
  span.store-name {
    font-size: 20px;
  }
  .store-info {
    margin-left: 5px;
    font-size: 20px;
    color: #2b8ff2;
  }
</style>
<template>
  <div v-if="order_data!=null">
    <Card style="width:100%">
      <p slot="title">
        订单信息
      </p>
      <div class="item-container">
        <div class="item">
          <span class="item-title">订单编号</span>
          <span class="item-content">{{order_data.id}}</span>
        </div>
        <div class="item">
          <span class="item-title">创建时间</span>
          <span class="item-content">{{order_data.create_time}}</span>
        </div>
        <div class="item">
          <span class="item-title">订单状态</span>
          <span class="item-content">{{GLOBAL.getOrderStatus(order_data.pay_status,order_data.trade_status)}}</span>
        </div>
        <div class="item">
          <span class="item-title">买家姓名</span>
          <span class="item-content">{{order_data.user_name}}</span>
        </div>
        <div class="item">
          <span class="item-title">买家手机号</span>
          <span class="item-content">{{order_data.user_phone}}</span>
        </div>
        <div class="item">
          <span class="item-title">订单金额</span>
          <span class="item-content">{{order_data.total_amount/100}}</span>
        </div>
        <div class="item">
          <span class="item-title">实付金额</span>
          <span class="item-content">{{order_data.pay_amount/100}}</span>
        </div>
        <div class="item">
          <span class="item-title">备注</span>
          <span class="item-content">{{order_data.remark}}</span>
        </div>
      </div>
    </Card>
    <Card style="width:100%;margin-top: 10px">
      <p slot="title">
        订单商品
      </p>
      <div class="order-item-container">
        <div class="order-item" v-for="item in order_data.item">
          <div class="store-info">
            <Icon type="ios-basket" color="#2b8ff2" /><span class="store-name"><router-link :to="'/stores/stores-edit/'+item.store_id+'/1'">{{item.store_name}}</router-link></span>
          </div>
          <div class="goods-sku-info">
            <img class="goods-sku-img" :src="GLOBAL.getUrl(item.goods_img,true,false)">
            <div class="goods-sku-title-wrap">
              <div class="goods-sku-title"  @click="toGoodsDetail(item.goods_id)">{{item.sku_title}}</div>
              <div class="goods-sku-content">
                <span class="content-item">数量:{{item.goods_num}}</span>
                <span class="content-item">单价:{{item.goods_price/100}}</span>
                <span class="content-item">总价:{{(item.goods_price*item.goods_num)/100}}</span>
              </div>
              <div class="goods-sku-content">
                <span class="content-item">VIP优惠:{{item.discount_price/100}}</span>
                <span class="content-item">推广赏金:{{item.sku_reward===null?0:item.sku_reward/100}}</span>
                <span class="content-item">分销金额:{{item.dis_money/100}}</span>
                <span class="content-item">实收:{{((item.goods_price*item.goods_num) -item.discount_price - (item.sku_reward===null?0:item.sku_reward)-item.dis_money)/100}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
  import {get} from '@/api/orders'

  export default {
    name: 'order-detail',
    data() {
      return {
        order_id: null,
        order_data: null
      };
    },

    created() {
      this.order_id = this.$route.params.order_id;
      this.getData();
    },
    methods: {
      getData() {
        let vm = this;
        get(this.order_id).then(rep => {
          vm.order_data = rep.data.data;
        })
      },
      toGoodsDetail(id) {
        this.$router.push({name: 'active_info', params: {id: id, view: 1}});
      }
    }

  }
</script>